<template>
  <div class="settings-container">
    <div class="app-container">
      <el-card>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <!-- label是标签页的标题 标签与标签之间的是每一个tab面板的内容-->
          <el-tab-pane label="角色管理" name="roles">
            <el-button type="primary" style="margin: 10px 0" icon="el-icon-plus" @click="clickShowAdd">新增角色</el-button>
            <!-- 表格 label是列的标题 prop是当前列渲染的字段-->
            <el-table stripe border :data="tableData" style="width: 100%">
              <!-- type="index" 索引是从1开始排  传入方法 从0排序 -->
              <el-table-column width="80" label="序号" type="index" :index="indexMethod" />
              <el-table-column prop="name" sortable label="角色名称" />
              <el-table-column prop="description" label="描述" />
              <el-table-column label="操作">
                <template #default="{row}">
                  <!-- {{ row.id }} row就是当前行的数据信息 -->
                  <el-button type="primary" size="small" @click="assignRole(row.id)">分配权限</el-button>
                  <el-button type="success" size="small" @click="showEdit(row.id)">编辑</el-button>
                  <el-button type="danger" size="mini" @click="delRole(row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页组件
              :current-page 页码
              :page-sizes  下拉选择每页条数
              page-size 每页条数
              layout 布局
              total 总条数
              @size-change="handleSizeChange" 每页条数发生变化触发
              @current-change="handleCurrentChange" 页码发生变化触发
            -->
            <el-pagination
              style="margin-top: 15px"
              background
              :current-page="page"
              :page-sizes="[1, 2, 3, 4]"
              :page-size="pagesize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-tab-pane>
          <!-- 公司信息面板 -->
          <el-tab-pane label="公司信息" name="companyInfo">
            <el-form label-width="80px">
              <el-form-item label="企业名称">
                <el-input v-model="companyInfo.name" style="width: 400px" disabled />
              </el-form-item>
              <el-form-item label="公司地址">
                <el-input v-model="companyInfo.companyAddress" style="width: 400px" disabled />
              </el-form-item>
              <el-form-item label="公司电话">
                <el-input v-model="companyInfo.companyPhone" style="width: 400px" disabled />
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="companyInfo.mailbox" style="width: 400px" disabled />
              </el-form-item>
              <el-form-item label="备注">
                <el-input v-model="companyInfo.remarks" style="width: 400px" disabled />
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <!-- 新增编辑对话框 -->
      <el-dialog :title="title" :visible="showDialog" @close="btnCancel">
        <el-form ref="roleForm" :model="form" :rules="rules" label-width="100px">
          <el-form-item label="角色名称" prop="name">
            <el-input v-model="form.name" placeholder="请输入角色名称" />
          </el-form-item>
          <el-form-item label="角色描述" prop="description">
            <el-input v-model="form.description" placeholder="请输入角色描述" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="btnCancel">取消</el-button>
          <el-button type="primary" @click="submitBtn">确认</el-button>
        </template>
      </el-dialog>
      <!-- 分配角色对话框 -->
      <el-dialog
        title="分配角色"
        :visible.sync="showAssignDialog"
        width="30%"
      >
        <!-- 权限列表 -->
        <el-tree
          v-if="isShow"
          ref="treeRef"
          :data="treeData"
          :props="{label: 'name'}"
          default-expand-all
          show-checkbox
          check-strictly
          node-key="id"
        />
        <span slot="footer" class="dialog-footer">
          <el-button @click="showAssignDialog = false">取 消</el-button>
          <el-button type="primary" @click="handelSubmit">确 定</el-button>
        </span>
      </el-dialog>

    </div>
  </div>
</template>
<script>
import { reqGetRolesList, reqDelRole, reqAddRole, reqUpdateRole, reqGetRoleDetail, reqGetCompanyInfo, reqAssignPrem } from '@/api/settings'
import { reqGetPermissionList } from '@/api/permission'
import { tranlateToData } from '@/utils'
export default {
  name: 'Settings',
  data() {
    return {
      title: '新增角色',
      activeName: 'roles',
      tableData: [], // 表格的数据
      page: 1, // 页码
      pagesize: 3, // 每页条数
      total: 0, // 总条数
      showDialog: false,
      form: {
        name: '',
        description: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入角色名称', trigger: ['change', 'blur'] }
        ],
        description: [
          { required: true, message: '请输入角色描述', trigger: ['change', 'blur'] }
        ]
      },
      companyInfo: {},
      showAssignDialog: false, // 分配角色对话框的布尔值
      treeData: [], // 权限列表数组
      isShow: true,
      roleId: '' // 分配权限的角色id
    }
  },
  created() {
    this.getRolesList()
    // this.getCompanyInfo()
  },
  methods: {
    // 点击面板触发的处理函数 tab就是激活的面板组件  e事件对象
    handleClick(tab, e) {
      console.log(tab, e)
      if (tab.name === 'companyInfo' && !this.companyInfo.name) {
        this.getCompanyInfo()
      }
    },
    // 获取所有角色列表的方法
    async getRolesList() {
      const { data: { rows, total }} = await reqGetRolesList(this.page, this.pagesize)
      this.tableData = rows
      this.total = total
    },
    // 每页条数发生变化
    handleSizeChange(val) { // 最新的每页条数
      // console.log('每页条数变了', val)
      // 将最新的每页条数赋值, 重新获取数据
      this.pagesize = val
      this.getRolesList()
    },
    // 页码发生变化
    handleCurrentChange(val) { // 最新的页码
      // console.log('页码变了', val)
      // 将最新的页码赋值, 重新获取数据
      this.page = val
      this.getRolesList()
    },
    // 删除角色
    async delRole(id) {
      // 1. 确认提示
      const res = await this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
        type: 'warning'
      }).catch(() => {})
      if (res !== 'confirm') return this.$message.info('已取消')
      // 2. 发生请求
      await reqDelRole(id)
      // 当前页面只有一条数据 让页码 page--
      if (this.tableData.length === 1 && this.page > 1) {
        this.page--
      }
      // 3. 重新渲染
      this.getRolesList()
    },
    // 自定义索引列
    indexMethod(index) {
      // console.log(index + 1 + 当前页码的前一页 this.page -1 * 没页条数(this.pagesize))
      return index + 1 + (this.page - 1) * this.pagesize
    },
    btnCancel() {
      this.showDialog = false
      // 重置表单数据
      this.$refs.roleForm.resetFields()
    },
    clickShowAdd() {
      this.showDialog = true
      this.title = '新增角色'
    },

    // 点击确认新增/编辑角色
    submitBtn() {
      this.$refs.roleForm.validate(async boo => {
        if (!boo) return
        if (this.form.id) {
          // 编辑
          // 1. 发送请求
          const { message } = await reqUpdateRole(this.form)
          // 2. 提示用户
          this.$message.success(message)
        } else {
          // 新增
          // 1. 发送请求
          const { message } = await reqAddRole(this.form)
          // 2. 提示用户
          this.$message.success(message)
        }
        // 3. 关闭对话框
        this.btnCancel()
        // 4. 重新渲染
        // this.page = (this.total / this.pagesize) + 1
        this.page = 1
        this.getRolesList()
      })
    },
    async showEdit(id) {
      this.title = '编辑角色'
      const { data } = await reqGetRoleDetail(id)
      this.form = data
      this.showDialog = true
    },
    // 获取公司信息
    async getCompanyInfo() {
      const res = await reqGetCompanyInfo(this.$store.state.user.userInfo.companyId)
      // console.log(res)
      this.companyInfo = res.data
    },
    // 分配角色的对话框展示
    async assignRole(id) {
      this.roleId = id // 存储点击的角色id
      this.isShow = false
      // 1.展示对话框
      this.showAssignDialog = true
      // 2. 获取权限列表处理后并赋值
      const { data } = await reqGetPermissionList()
      this.treeData = tranlateToData(data, '0')
      const { data: { permIds }} = await reqGetRoleDetail(id)
      this.isShow = true
      // 3. 默认选中
      this.$nextTick(() => {
        this.$refs.treeRef.setCheckedKeys(permIds)
      })
    },
    // 分配权限
    async handelSubmit() {
      // console.log(this.$refs.treeRef.getCheckedKeys())
      // 发送请求
      await reqAssignPrem({ id: this.roleId, permIds: this.$refs.treeRef.getCheckedKeys() })
      // 关闭对话框
      this.showAssignDialog = false
    }
  }
}
</script>

<style>

</style>
